import { Button, Switch } from 'antd'
import { useRecoilValue } from 'recoil'
import { ReviewInfo } from '../../data'
import styles from './index.module.less'
import { dictValues } from '@/store/dicts'
import CheckAuthority from '@/components/CheckAuthority'

interface ReviewInfoProps {
  reviewInfo: ReviewInfo | undefined
  handleSwitchChange: (e: boolean) => void
  switchChecked: boolean
  status: string // 状态
  createTime: string // 创建时间
  handleAgree: () => void
  handleAgreeCancel: () => void
}

export default (props: ReviewInfoProps) => {
  const dictValuesList = useRecoilValue(dictValues)
  const { reviewInfo, switchChecked, handleSwitchChange, handleAgreeCancel, createTime, status, handleAgree } = props

  // 样式
  const computedColor = (status: string) => {
    switch (status) {
      case '0':
        return {
          color: '#F7B060',
        }
      case '2':
        return {
          color: '#EB5F62',
        }
      case '1':
        return {
          color: '#51BCA5',
        }

      default:
        break
    }
  }

  return (
    <div className={styles.card}>
      <div className={styles.title}>申请理由：{reviewInfo?.applyReason}</div>
      <div className={styles.txt}>创建时间：{createTime}</div>
      <div className={styles.status} style={computedColor(status)}>
        <div>当前状态：{dictValuesList.apply_status.find((item) => item.value === status)?.label}</div>
        {status === '2' && <div>拒绝原因：{reviewInfo?.backReason}</div>}
      </div>
      <div className={styles.btns}>
        <CheckAuthority role={[10, 20]}>
          {status === '0' && (
            <>
              <Button onClick={handleAgree} style={{ marginRight: '24px' }} type='primary'>
                同意
              </Button>
              <Button style={{ marginRight: '24px' }} onClick={handleAgreeCancel}>
                不同意
              </Button>
            </>
          )}
        </CheckAuthority>

        <div className={styles.switch}>
          <Switch checked={switchChecked} onChange={handleSwitchChange} />
          <div>仅显示修改内容</div>
        </div>
      </div>
    </div>
  )
}
